<template>
  <div class="box5" ref="map"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
//引入中国地图的JSON数据
import chinaJson from './china.json'
//获取DOM元素
let map = ref()
//注册中国地图
echarts.registerMap('china', chinaJson as any)
onMounted(() => {
  let myEchart = echarts.init(map.value)
  myEchart.setOption({
    //地图组件
    geo: [
      {
        map: 'china', //中国地图
        roam: true, //鼠标缩放漫游
        //地图位置调试

        left: '50',
        top: '50',
        right: '50',
        bottom: '-160',
        label: {
          show: true, //地图文字
          color: '#fff',
          fontsize: 14,
        },
        //每一个多边形样子
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#02347F', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#032249', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          opacity: 0.8,
        },
        //地图高亮效果
        emphasis: {
          itemStyle: {
            color: 'skyblue',
          },
          label: {
            fontSize: 20,
          },
        },
      },
    ],
    //布局位置
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
    //系列设置
    series: [
      {
        type: 'lines', //航线系列
        data: [
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [119.306239, 26.075302], // 终点
            ],
            // 统一的样式设置
            lineStyle: {
              color: '#FF9400',
              width: 2,
            },
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [121.4648, 31.2891], // 终点
            ],
            // 统一的样式设置
            lineStyle: {
              color: '#FF9400',
              width: 2,
            },
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [113.7964, 24.7028], // 终点
            ],
            // 统一的样式设置
            lineStyle: {
              color: '#FF9400',
              width: 2,
            },
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [87.9236, 43.5883], // 终点
            ],
            // 统一的样式设置
            lineStyle: {
              color: '#FF9400',
              width: 2,
            },
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [120.1575, 40.5783], // 终点
            ],
            // 统一的样式设置
            lineStyle: {
              color: '#FF9400',
              width: 2,
            },
          },
        ],
        //线的特效
        effect: {
          //symbol: 'arrow', //特效标记
          symbol:
            'path://M887.296 504.32l-54.272-34.304-245.76-156.16c3.584-63.488 5.632-105.984 5.632-107.008v-0.512c0-43.008-33.28-121.856-80.384-121.856-47.616 0-80.384 79.36-80.384 121.856v0.512c0 1.024 2.048 43.52 5.632 107.008L189.44 471.552l-51.712 32.768c-6.144 4.608-12.288 13.824-12.288 22.528v79.36c0 22.016 17.92 40.448 40.448 40.448h0.512c22.016 0 40.448-17.92 40.448-40.448V501.76c0-22.528 18.432-40.448 40.448-40.448 11.264 0 21.504 4.608 28.672 11.776 7.168 7.168 11.776 17.408 11.776 28.672v13.312c0 7.68 2.048 14.336 5.632 20.48 7.168 11.776 19.968 19.968 34.816 19.968 11.264 0 21.504-4.608 28.672-11.776 6.144-6.144 10.24-14.336 11.776-23.04 0.512-1.536 0.512-3.584 0.512-5.12V454.656c0-22.016 18.432-40.448 40.448-40.448 11.264 0 21.504 4.608 28.672 11.776 7.168 7.168 11.776 17.408 11.776 28.672v50.176c1.024 12.8 2.048 25.6 2.56 38.4 8.192 25.6 31.744 44.544 60.416 44.544 28.16 0 52.224-18.432 60.416-44.032l3.072-38.4V425.472c0-11.264 4.608-21.504 11.776-28.672 7.168-7.168 17.408-11.776 28.672-11.776 22.016 0 40.448 18.432 40.448 40.448v102.912c0 11.264 4.608 21.504 11.776 28.672 7.168 7.168 17.408 11.776 28.672 11.776 19.456 0 35.328-13.824 39.424-31.744 0.512-3.072 1.024-5.632 1.024-8.704v-13.312c0-11.264 4.608-21.504 11.776-28.672 7.168-7.168 17.408-11.776 28.672-11.776 22.016 0 40.448 18.432 40.448 40.448v46.592c0 22.016 17.92 40.448 40.448 40.448h0.512c22.016 0 40.448-17.92 40.448-40.448V527.36c-1.024-9.216-7.168-18.432-13.312-23.04z', //特效标记
          show: true,
          period: 6,
          trailLength: 0.7,
          color: '#fff',
          symbolSize: 20, //标记大小
        },
      },
    ],
  })
})
</script>

<style lang="scss" scoped></style>
